<template>
  <div class="jat-icon">
    <i
      :style="{
        width: width,
        height: height,
        background: getUrl()
      }"
    ></i>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ""
    },
    iconType: {
      type: String,
      default: "png"
    },
    width: {
      type: String,
      default: "20px"
    },
    height: {
      type: String,
      default: "20px"
    }
  },
  data() {
    return {}
  },
  components: {},
  created() {},
  mounted() {
    console.log(this.name)
  },
  methods: {
    getUrl() {
      return `url(${require("@/assets/svg/edit.svg")})`
      // return `url(${require(`@/assets/${
      //   this.iconType === "svg" ? this.iconType : "img"
      // }/` +
      //   this.name +
      //   `.${this.iconType}`)})`
    }
  }
}
</script>

<style lang="less" scoped>
.jat-icon {
  i {
    display: inline-block;
  }
  display: inline-block;
}
</style>
